<template>
  <div>
    <el-drawer
      v-model="visible"
      :with-header="false"
      :append-to-body="true"
      size="1000"
      @close="close"
    >
      <div class="detail-body" v-loading="initLoading">
        <template v-if="!initLoading">
          <div class="detail-header">
            <div class="detail-source icon icon-order"></div>
            <div class="ml20">
              <div>
                <span class="fz16 fw">售后订单</span>
                <el-tag class="ml10" type="">{{
                  orderRefundDetail.type.name
                }}</el-tag>
              </div>
              <div class="flex mt5">
                <div class="text-grey">订单编号：</div>
                <div class="fz16">{{ orderRefundDetail.order.order_no }}</div>
              </div>
            </div>
          </div>

          <div class="detail-row">
            <div class="detail-row-item">
              <div class="detail-row-item-title">订单状态</div>
              <div
                class="detail-row-item-data"
                :class="`text-${orderRefundDetail.status.color}`"
              >
                {{ orderRefundDetail.status.name }}
              </div>
            </div>
            <div class="detail-row-item">
              <div class="detail-row-item-title">实际支付</div>
              <div class="detail-row-item-data">
                {{ orderRefundDetail.order.pay_price }}元
              </div>
            </div>
            <div class="detail-row-item">
              <div class="detail-row-item-title">件数</div>
              <div class="detail-row-item-data">
                {{ orderRefundDetail.order_goods.total_num }}
              </div>
            </div>
            <div class="detail-row-item">
              <div class="detail-row-item-title">申请时间</div>
              <div class="detail-row-item-data">
                {{ orderRefundDetail.create_time }}
              </div>
            </div>
          </div>
          <template v-if="orderRefundDetail.status.value == 2">
            <div class="detail-cell mt30">
              <div class="detail-cell-head">
                <div>拒绝原因</div>
              </div>
              <div class="mt10">
                <span class="text-red">{{
                  orderRefundDetail.refuse_desc
                }}</span>
              </div>
            </div>
          </template>
          <div class="detail-cell mt30">
            <div class="detail-cell-head">
              <div>退款信息</div>
            </div>
            <div class="detail-cell-list mt10">
              <div class="detail-cell-item">
                <span class="text-grey">退款原因：</span>
                <span>{{ orderRefundDetail.type_desc }}</span>
              </div>
              <div class="detail-cell-item">
                <span class="text-grey">退款说明：</span>
                <span>{{ orderRefundDetail.apply_desc }}</span>
              </div>
              <div class="detail-cell-item">
                <span class="text-grey">退款凭证：</span>
                <div class="mt10" v-if="orderRefundDetail.imgs.length > 0">
                  <template
                    v-for="(item, index) in orderRefundDetail.imgs"
                    :key="index"
                  >
                    <el-avatar
                      shape="square"
                      :size="60"
                      :src="item"
                    ></el-avatar>
                  </template>
                </div>
                <span class="text-grey" v-else>无</span>
              </div>
            </div>
            <template v-if="orderRefundDetail.status.value == 4 && orderRefundDetail.refund_time">
              <div class="detail-cell-list mt10">
                <div class="detail-cell-item  flex">
                  <div class="text-grey">退款金额：</div>
                  <money size="fz-large-x" :value="orderRefundDetail.refund_money"></money>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">退款时间：</span>
                  <span>{{ orderRefundDetail.refund_time }}</span>
                </div>
              </div>
            </template>
          </div>

          <template
            v-if="
              $utils.inArray(orderRefundDetail.status.value, [3, 4]) &&
              orderRefundDetail.delivery_type.value === 'express' &&
              orderRefundDetail.user_send_status &&
              orderRefundDetail.receipt_status &&
              orderRefundDetail.delivery_status
            "
          >
            <div class="detail-cell mt30">
              <div class="detail-cell-head">
                <div>商家发货信息</div>
              </div>
              <div class="detail-cell-list mt10">
                <div class="detail-cell-item">
                  <span class="text-grey">物流：</span>
                  <span>{{ orderRefundDetail.express_company_name }}</span>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">物流单号：</span>
                  <span>{{ orderRefundDetail.express_no }}</span>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">发货状态：</span>
                  <span class="text-green">已发货</span>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">发货时间：</span>
                  <span>{{ orderRefundDetail.send_time }}</span>
                </div>
              </div>
            </div>
          </template>

          <template
            v-if="
              $utils.inArray(orderRefundDetail.status.value, [3, 4]) &&
              orderRefundDetail.delivery_type.value === 'express' &&
              orderRefundDetail.user_send_status
            "
          >
            <div class="detail-cell mt30">
              <div class="detail-cell-head">
                <div>用户发货信息</div>
              </div>
              <div class="detail-cell-list mt10">
                <div class="detail-cell-item">
                  <span class="text-grey">物流单号：</span>
                  <span>{{ orderRefundDetail.user_express_company_name }}</span>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">物流单号：</span>
                  <span>{{ orderRefundDetail.user_express_no }}</span>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">发货状态：</span>
                  <span class="text-green">已发货</span>
                </div>
                <div class="detail-cell-item">
                  <span class="text-grey">发货时间：</span>
                  <span>{{ orderRefundDetail.user_send_time }}</span>
                </div>
              </div>
            </div>
          </template>

          <div class="detail-cell mt30">
            <div class="detail-cell-head">用户信息</div>
            <div class="mt20">
              <userBox
                :avatar="orderRefundDetail.user_avatar"
                :nick-name="orderRefundDetail.user_nickName"
                :id="orderRefundDetail.user_id"
              ></userBox>
            </div>
          </div>
          <template
            v-if="
              orderRefundDetail.status.value == 3 &&
              orderRefundDetail.delivery_type.value == 'express' &&
              orderRefundDetail.address
            "
          >
            <div class="detail-cell mt30">
              <div class="detail-cell-head">
                <div>退货地址</div>
              </div>
              <div class="mt20">
                <div>
                  <span class="text-grey">收货联系人：</span>
                  <span>{{ orderRefundDetail.address.name }}</span>
                </div>
                <div class="mt10">
                  <span class="text-grey">收货联系电话：</span>
                  <span>{{ orderRefundDetail.address.phone }}</span>
                </div>
                <div class="mt10">
                  <span class="text-grey">收货地址：</span>
                  <span>{{ orderRefundDetail.address.detail }}</span>
                </div>
              </div>
            </div>
          </template>
          <div class="detail-cell mt30">
            <div class="detail-cell-head">商品信息</div>
            <div class="mt10">
              <el-table :data="[orderRefundDetail.order_goods]">
                <el-table-column prop="goods_name" label="商品名称" width="400">
                  <template #default="scope">
                    <div class="flex">
                      <el-avatar
                        shape="square"
                        :size="50"
                        :src="scope.row.goods_image"
                      ></el-avatar>
                      <div class="ml10">
                        <div class="te" style="width: 300px">
                          {{ scope.row.goods_name }}
                        </div>
                        <div class="mt5">
                          <span class="text-grey">规格:</span>
                          <span>{{ scope.row.sku_attr_text }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bar_code" label="商品编码">
                  <template #default="scope">
                    <div>
                      {{ scope.row.bar_code }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="describe" label="单价(元)">
                  <template #default="scope">
                    <div>
                      {{ scope.row.price }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="describe"
                  label="购买数量"
                  align="center"
                >
                  <template #default="scope">
                    <div>
                      {{ scope.row.total_num }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="describe" label="商品总价">
                  <template #default="scope">
                    <div>
                      {{ scope.row.total_price }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </div>
    </el-drawer>
  </div>
</template>
            
<script lang="ts">
export default {
  name: "orderRefundDetail",
};
</script>
  
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import { getOrderRefundDetail } from "@/api/store/order_refund";
import userBox from "@/components/user/box.vue";

import { listPageType, Result, ResultError } from "@/types";
import { useConfig } from "@/store";

const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["close"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const initLoading = ref<boolean>(true);

const orderRefundDetail = ref<any>({});

const toInit = () => {
  getOrderRefundDetail({
    id: operationId.value,
  })
    .then((res: Result) => {
      orderRefundDetail.value = res.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
};

const open = (id: number = 0, groupId: number = 0) => {
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
  visible.value = true;
};

const close = () => {
  emit("close");
};

defineExpose({ open });
</script>

<style scoped>
.detail-body {
  height: 100%;
}
.detail-header {
  display: flex;
}
.detail-source {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  color: var(--base-default);
  background: var(--el-color-primary-light-9);
}

.detail-row {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.detail-row-item {
  width: 20%;
}
.detail-row-item-title {
  color: #666;
}

.detail-row-item-data {
  margin-top: 10px;
}

.detail-cell {
}
.detail-cell-head {
  position: relative;
  margin-left: 12px;
  height: 30px;
  font-weight: bold;
  line-height: 30px;
}
.detail-cell-head::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 12px;
  left: -12px;
  top: calc(50% - 6px);
  background: var(--base-default);
}
.detail-cell-list {
  display: flex;
  flex-wrap: wrap;
}
.detail-cell-item {
  width: calc(100% / 3);
  margin-top: 10px;
}
</style>